<template>
  <div class="trends-chart-container">
    <div class="chart-graph">
      <PieChart
        v-if="optionRadarChart"
        :option="optionRadarChart"
        :height="'400px'"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import { fontChart } from "@/utils/echartPxToRem";
import PieChart from "@components/common/PieChart.vue";

export default {
  components: { PieChart },
  props: {
    categories: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  data() {
    return {
      optionRadarChart: null,
      indicatorMap: {
        location_neighbourhood: 0,
        value_for_money: 1,
        guest_experience_service: 2,
        food_beverage: 3,
        hotel_amenities_atmosphere: 4,
        cleanliness: 5,
        room_comfort: 6,
      },
    };
  },
  methods: {
    getServiceCategories() {
      return Array.isArray(this.categories.serviceCategories)
        ? this.categories.serviceCategories
        : [];
    },

    getScoreArray() {
      const categoriesArray = this.getServiceCategories();
      const scoreArray = new Array(7).fill(0);

      categoriesArray.forEach((item) => {
        const index = this.indicatorMap[item.key];
        if (index !== undefined && item.score !== undefined) {
          scoreArray[index] = item.score;
        }
      });

      return scoreArray;
    },

    initChartOption() {
      const goalsColor = "#708dd1";
      const performanceColor = "#8d5e94";
      const itemSize = 8;
      const tooltipContentFontSize = 12;
      const tooltipTitleFontSize = 16;

      return {
        color: [goalsColor, performanceColor],
        title: { text: "" },
        grid: {
          top: "0%",    // 减少顶部空白
          bottom: "15%", // 减少底部空白
          left: "10%",
          right: "10%"
        },
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            let titleHtml = `<div style="
              font-weight: 500; 
              margin-bottom: 8px; 
              font-size: $(tooltipTitleFontSize) !important; 
              color: #232323 !important;
              font-family: 'PingFang SC', sans-serif;
            ">${params.seriesName}</div>`;

            let contentHtml = "";
            params.data.value.forEach((val, index) => {
              const dot = `<span style="
                display: inline-block; 
                width: 10px; 
                height: 10px; 
                border-radius: 50%; 
                background-color: ${params.color}; 
                margin-right: 6px; 
                vertical-align: middle;
              "></span>`;
              const indicatorName =
                this.optionRadarChart.radar.indicator[index].name;

              const leftPart = `
                <div style="
                  color: #6a6969; 
                  font-size: $(tooltipContentFontSize) !important; 
                  display: flex; 
                  align-items: center; 
                  font-weight: 400; 
                  font-family: 'PingFang SC', sans-serif;
                ">
                  ${dot}${indicatorName}
                </div>
              `;

              const rightPart = `
                <div style="
                  color: #232323; 
                  font-size: $(tooltipContentFontSize) !important; 
                  font-weight: 500; 
                  margin-left: 15px; 
                  font-family: 'PingFang SC', sans-serif;
                ">
                  ${val}
                </div>
              `;

              contentHtml += `<div style="display: flex; justify-content: space-between; margin-bottom: 8px; align-items: center;">${leftPart}${rightPart}</div>`;
            });
            return titleHtml + contentHtml;
          },
          extraCssText:
            "border: none; border-radius: 4px; box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1); padding: 12px;",
          textStyle: {
            color: "#666",
          },
        },
        legend: {
          data: ["Goals", "Performance"],
          bottom: "25px",  // 将图例紧贴底部
          itemWidth: itemSize,
          itemHeight: itemSize,
          itemGap: 30,
          icon: "rect",
          textStyle: {
            fontSize: 12,
            color: "#000",
            fontWeight: "normal",
            padding: [0, 0, 0, 2],
            rich: {
              a: {
                verticalAlign: "middle",
                lineHeight: itemSize,
              },
            },
          },
        },
        radar: {
          shape: "polygon",
          radius: "60%",  // 保持60%半径
          center: ["50%", "48%"],  
          indicator: [
            { name: "Location & Neighbourhood", max: 10 },
            { name: "Value for money", max: 10 },
            { name: "Guest Experience & Service", max: 10 },
            { name: "Food & Beverage", max: 10 },
            { name: "Hotel Amenities & Atmosphere", max: 10 },
            { name: "Cleanliness", max: 10 },
            { name: "Room Comfort", max: 10 },
          ],
          name: {
            textStyle: {
              color: "#232323",
              fontSize: 12,
              fontWeight: "400",
            },
          },
          splitArea: {
            areaStyle: {
              color: ["#e5e6eb", "#ffffff", "#f2f3f5", "#fff", "#f2f3f5"],
            },
          },
          axisLine: {
            lineStyle: { width: 1 },
          },
        },
        series: [
          {
            name: "Goals",
            type: "radar",
            symbolSize: 6,
            lineStyle: { width: 2 },
            data: [
              {
                value: [9.0, 8.5, 9.5, 8.5, 8.8, 10.0, 9.2],
                name: "Goals",
                itemStyle: { color: goalsColor },
              },
            ],
          },
          {
            name: "Performance",
            type: "radar",
            symbolSize: 6,
            lineStyle: { width: 2 },
            data: [
              {
                value: this.getScoreArray(),
                name: "Performance",
                itemStyle: { color: performanceColor },
              },
            ],
          },
        ],
      };
    },

    updateChartData() {
      this.optionRadarChart = null;
      this.$nextTick(() => {
        this.optionRadarChart = this.initChartOption();
      });
    },
  },
  watch: {
    categories: {
      deep: true,
      handler() {
        this.updateChartData();
      },
    },
  },
  mounted() {
    this.updateChartData();
  },
};
</script>

<style scoped lang="scss">
.trends-chart-container {
  margin: 20px 0;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 400px; // 固定容器高度
}

::v-deep .echarts-legend-item:first-child .echarts-legend-marker {
  background-color: #708dd1 !important;
  border-color: #708dd1 !important;
}

::v-deep .echarts-legend-item:last-child .echarts-legend-marker {
  background-color: #8d5e94 !important;
  border-color: #8d5e94 !important;
}
</style>